import React from 'react';
import PropTypes from 'prop-types';
import { Form, Input, Select } from 'antd';
import classNames from 'classnames'
import OwnApply from './OwnApply';
import styles from '../index.less';

const { Item } = Form;
const { Option } = Select;
const { TextArea } = Input;

// 调岗前直属上级确认申请
const BeforeSuperior = ({ form, type, detail, user }) => {
    const { getFieldDecorator } = form;
    const { startBy } = detail;
    const columnList = [
        { label: '工作技能和组织价值观', prop: 'superiorToWorkSkills', isRequired: true, min: 2 },
        { label: '主要成就', prop: 'superiorToAchievement', isRequired: true, min: 2 },
        { label: '需要改进的地方', prop: 'superiorToImprove', isRequired: true, min: 2 }
    ];
    const performanceOptions = [
        { label: 'A (持续超出预期)', value: 'A' },
        { label: 'B (持续符合预期)', value: 'B' },
        { label: 'C (明显达不到预期))', value: 'C' }
    ];
    // const mapValueToLabel = val => {
    //     const targetItem = performanceOptions.find(item => item.value === val);
    //     if (!targetItem) return '';
    //     return targetItem.label;
    // };
    return (
        <div>
            {startBy === '1' && <OwnApply user={user} detail={detail} type={type} form={form} btns={null} />}
            <div className={styles.title}>转正评估（直属上级）</div>
            <div className={classNames(styles.formWrap, { [styles.detailWrap]: type === 'detail' })}
                style={ type !== 'detail' ? { marginBottom: '32px' } : {}}>
                {columnList.map(item => (
                    <Item label={item.label}
                        key={item.prop}
                        help={type !== 'detail' ? `${item.min}-400个字符` : ''}>
                        {type !== 'detail' &&
                            getFieldDecorator(item.prop, {
                                rules: [
                                    {
                                        required: item.isRequired,
                                        message: `请输入${item.label}`
                                    },
                                    {
                                        max: 400,
                                        min: item.min,
                                        message: `${item.min}-400个字符`
                                    }
                                ],
                                initialValue: detail[item.prop]
                            })(<TextArea placeholder="请输入" rows={4} />)}
                        {type === 'detail' &&
                            getFieldDecorator(item.prop, {
                                initialValue: detail[item.prop]
                            })(<pre className={styles.preText}>{detail[item.prop]}</pre>)}
                    </Item>
                ))}
                <Item label="综合表现" required={type !== 'detail'}>
                    {type !== 'detail' && (
                        getFieldDecorator('superiorAssess', {
                            initialValue: detail.superiorAssess,
                            rules: [
                                {
                                    required: true,
                                    message: '请选择综合表现！'
                                }
                            ]
                        })(
                            <Select placeholder="请选择">
                                {performanceOptions.map(item => (
                                    // 根据接口要求，提交给后端的值用label
                                    <Option key={item.value} value={item.label}>
                                        {item.label}
                                    </Option>
                                ))}
                            </Select>
                        )
                    )}
                    {type === 'detail' && (
                        getFieldDecorator('superiorAssess', {
                            initialValue: detail.superiorAssess
                        })(
                            // 直接显示值（值是字符串）
                            <span className={styles.detailSpan}>{detail.superiorAssess}</span>
                        )
                    )}
                </Item>
            </div>
        </div>
    );
};

BeforeSuperior.propTypes = {
    type: PropTypes.oneOf(['edit', 'detail']).isRequired
};

export default BeforeSuperior;
